<template>
  <div class="">
    <!-- <Bread /> -->
    <!-- <div class="bread-container">
      <div class="bread self-container">
        <span> 您所在位置： </span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            :to="{
              path: '/locationCity/' + this.$route.params.id,
              query: { activeName: '首页' },
            }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item
            :to="{
              path: '/locationCity/' + this.$route.params.id,
              query: { activeName: '明星企业' },
            }"
            >明星企业列表</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
    </div> -->
    <div class="self-container flex font-sans main-content">
      <div class="self-main pr-2">
        <h3 class="py-4 leading-relaxed ">{{ info.title }}</h3>
        <div class="text-gray-400 py-4">
          <i class="el-icon-time"> </i>
          <span>
            {{ info.releaseTime }}
          </span>
        </div>
        <div class="py-4" v-html="info.remark"></div>
      </div>
      <div class="aside">
        <h5 class="head">
          相关推荐
        </h5>
        <ul class="pl-4">
          <li
            v-for="item in recommendList"
            :key="item.id"
            :class="['recommend-item pr-4']"
            @click="toDetail(item.id)"
          >
            <div class="flex items-start">
              <div
                class=""
                style="width: 104px; min-width: 104px;min-height: 68px;margin-right: 4px"
              >
                <el-image
                  style="width: 100%;height: 100%"
                  :src="item.picture"
                  fit="contain"
                >
                  <el-image
                    style="width: 100%;height: 100%"
                    slot="error"
                    :src="require('@/assets/images/head.png')"
                    fit="cover"
                  >
                  </el-image>
                </el-image>
              </div>
              <div
                class="flex-grow flex flex-col justify-between"
                style="min-height: 68px"
              >
                <div
                  class="title"
                  style="color: #333;font-size: 14px;font-weight: 400"
                >
                  {{ item.title }}
                </div>
                <p class="sub-title" style="color: #999999;">
                  {{ item.releaseTime }}
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Bread from '@/components/Bread'

import {
  getStarCompanyDetail,
  getStarCompanyList,
} from '@/api/windowCity/getCityInfo'
export default {
  components: {
    Bread,
  },
  data() {
    return {
      info: {
        id: 0,
        mainImg: 'https://w.wallhaven.cc/full/6o/wallhaven-6oeww7.png',
        title:
          '谷歌将采用云游戏绕过苹果；腾讯格斗手游携千万预约来袭 | 产业周报',
        releaseTime: '2021-12-03',
        dynamicInfo:
          '世界在发生剧烈的变化，技术也在发生快速的变化，所有的变化都会深刻影响到我们每一家企业，所以青年企业家朋友们，明天我们的企业能走到哪一步，关键在于眼光，在于对未来的判断。如果能够把......',
        typeId: 1,
      },
      recommendList: [
        {
          id: 1,
          mainImg: 'https://w.wallhaven.cc/full/6o/wallhaven-6oeww7.png',
          title: '专注于疫苗邻域，华诺泰生物或天使轮融资',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '世界在发生剧烈的变化，技术也在发生快速的变化，所有的变化都会深刻影响到我们每一家企业，所以青年企业家朋友们，明天我们的企业能走到哪一步，关键在于眼光，在于对未来的判断。如果能够把......',
          typeId: 1,
        },
      ],
    }
  },
  watch: {
    '$route.params.detailId': {
      handler(v) {
        let id = parseInt(v)
        this.getDetailInfo(id)
      },
    },
  },
  created() {
    this.getDetailInfo()
    this.getRecommendList()
  },
  methods: {
    toDetail(item) {
      let companyDetailId = parseInt(item.id)
      this.getRouterdetail(companyDetailId)
    },
    getRouterdetail(id) {
      let locationId = this.$route.params.id
      let nowDetailId = this.$route.params.detailId
      if (parseInt(id) === parseInt(nowDetailId)) {
        return
      }

      this.$router.push({
        path: `/locationCity/${locationId}/locationCompanyDetail/${id}`,
      })
    },
    getDetailInfo(id) {
      if (!id && id !== 0) {
        id = this.$route.params.detailId
      }

      getStarCompanyDetail({ id }).then((res) => {
        this.info = res.data
      })
    },
    getRecommendList() {
      let cityId = this.$route.params.id

      let query = {
        pageSize: 8,
        pageNum: 1,
        cityId,
      }
      getStarCompanyList(query).then((res) => {
        if (res.code === 200) {
          this.recommendList = res.rows
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.self-main {
  width: 770px;
  min-height: 60vh;
}

.bread-container {
  width: 100%;
  background: #eef5ff;

  .bread {
    display: flex;
    align-items: center;
    margin: auto;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 400;
    .el-breadcrumb__item {
      font-size: 18px;
      font-weight: 400;
    }
  }
}
</style>
